<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>好书详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		
		<link rel="stylesheet" href="../../css/simple-line-icons.css">

		<link rel="stylesheet" href="../../css/mui-ext.css">
		<style>
			*{
				padding: 0px;
				border: 0px;
				margin: 0px;
				font-family: "黑体";
			}
			
			/*#books-desc{
				width: 90%;
			}*/
			
			#books-desc img{
				width: 100%;
			}
			
			#books-desc p{
				font-size: 15px;
				line-height: 170%;
				color: #303030;
				word-spacing:8px; 
				letter-spacing: 1px;
				font-family: "黑体";
				margin-top: 24px;
				text-align:justify;
				text-justify:inter-ideograph;
			}
		
		</style>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/utils/http.utils.js"></script>
		<script src="../../js/bus/pubfun.js"></script>
		<script type="text/javascript">
		
			/**
			 * 转换时间
			 * @param {Object} $conTime
			 * @param {Object} $type
			 */
			function stringConTime($conTime, $type){
				$conTime = Date.parse($conTime.replace(/-/g,"/"));
				var $date = new Date($conTime);
				var $month = $date.getMonth() + 1;
				var $year = $date.getFullYear();
				$month = $month > 9 ? $month : "0" + $month;
				var $day = $date.getDate();
				$day = $day > 9 ? $day :  "0" + $day
				var $retTime = ""
				if($type == "ymd"){
					$retTime = $year + "." + $month + "." + $day;
					return $retTime;
				}
				
				if($type == "ym"){
					$retTime = $year + "." + $month;
					return $retTime;
				}
					
				if($type == "d"){
					$retTime = $day;
					return $retTime;
				}
			}
		 	//获取
		 	var $booksid =  getQueryString(window.location.search, "booksid");
		 	//$params[0].split("=")[1];
		 	
			function fun_loadGoodBooksDat() {
			 	
				//var $books_href = $booksHref.split("?booksid=");
				//var $booksid = $books_href[1];
				mui.ajax({
					url: $request_url.getGoodBooksInfo,
					type: "get",
					dataType: "json",
					headers: {
						"Authorization": $headers_authorization
					},
					data: {
						id: $booksid
					},
					success: function(dat) {
						if(dat.code == 0) {
							//document.getElementById("imgBook").src = dat.result.thumbnail
							document.getElementById("goodbooks-title").innerHTML = dat.result.title;
							document.getElementById("books-Author").innerHTML = dat.result.author;
							//document.getElementById("contentAbstract").innerHTML = dat.result.contentAbstract;
							document.getElementById("publishDate").innerHTML = "" + stringConTime(dat.result.publishDate, "ymd");
							document.getElementById("books-Pageviews").innerHTML = '<img src="../../img/jzkt/yanjing_03.png" width="16">&nbsp;'+ dat.result.readCount;
							document.getElementById("books-desc").innerHTML = dat.result.content;
						}
					},
					error: function(err) {
						mui.toast("服务繁忙....");
					}
				});
			}

			window.onload = function() {
				fun_loadGoodBooksDat();
				
				fun_loadCommLst();
			}
		</script>
	</head>

	<body style="width: 100%; background-color: white;">
		<div class="" style="background-color: white; width: 100%; height: 100%;">
			<div id="slider" style="background-color: white; width: 100%;">
				<!--<div id="dv-books-img" style="width: 100%; margin-top: 4px;">
					<img id="imgBook" src="" style="width: 100%; height: 220px;"/>
				</div>-->
				<div style="margin: 2px 25px 2px 25px;">
					<h4 id="goodbooks-title" style="font-size: 18px; line-height: 130%; color: #303030;word-spacing:8px; letter-spacing: 1px;">
					</h4>
				</div>
				
				<div style="margin: 15px 25px 2px 25px; font-size: 15px; color: #303030;">
					<span id="contentAbstract" style="text-align:justify;text-justify:inter-ideograph; word-spacing:8px; letter-spacing: 1px;"></span>
				</div>
				
				<div style="font-size: 14px; color: #909090; margin: 10px 25px 2px 25px;">
					<div id="books-Author" style="margin-left: 0px; float: left;"></div>
					<div style="float: right; margin-right: 0px;" id="books-Pageviews"></div>
					<!--<span style="float: right; margin-right: 20px;"><img src="../../img/jzkt/pingluntubiao_03.png"></span>-->
				</div><br />
				
				<div style="font-size: 14px; color: #909090; margin: 5px 25px 2px 25px; float: left;">
					<span id="publishDate"></span>
				</div><br />
				
				<div style="margin: 15px 25px 2px 25px; font-size: 18px; line-height: 170%; color: #909090;" id="books-desc" >
					
				</div>
				
			</div>
			
			<div style="margin-top: 5px;">
				<hr style="width: 100%; height: 1px; background-color: #F1F1F1;" />
			</div>
			
			<div style="margin-top: 5px; margin-left: 15px;" id="goodBooksBody">
				
			</div>
			<br /><br /><br />
			
		</div>
		<nav class="mui-bar mui-bar-tab">
			<form class="mui-input-group" style="padding: 5px;">

				<div class="mui-row">
					<div class="mui-col-xs-10">
						<input type="text" placeholder="说说..." id="book-comment">
					</div>
					<div class="mui-col-xs-2">
						<button id="btn-addComment" type="button" class="mui-btn mui-btn-default" style="min-width:40px;top:2px;" onclick="return false;">评论</button>
					</div>
				</div>

			</form>
		</nav>
	</body>
	<script src="../../js/bus/comment.js"></script>
	<script>
		mui.init();
		
		var $currUser = JSON.parse(localStorage.getItem("login-user-parent"));
		document.getElementById("btn-addComment").addEventListener("tap", function(){
			if($currUser == null || $currUser == ""){
				mui.toast("尚未登录，无法评论");
				return;
			}
			
			var $comm = document.getElementById("book-comment").value;
			if($comm == null || $comm == ""){
				mui.toast("请输入评论内容");
				return;
			}
			
			mui.ajax({
				url: $request_url.addGoodBooksComm,
				type: "post",
				dataType: "json",
				headers: {
					"Authorization": $headers_authorization
				},
				data: {
					userId: $currUser.userId,
					objectType : "article",
					destObjectId : $booksid,
					commentContent : $comm
				},
				success: function(dat) {
					if(dat.code == 0){
						var $commHtmls = document.getElementById("goodBooksBody");
						var $dvComm = document.createElement("div");
						$dvComm.innerHTML = fun_commentHtml(dat.result);
						$commHtmls.appendChild($dvComm);
						document.getElementById("book-comment").value = "";
					} else {
						mui.toast(dat.message);
						return;
					}
				}, error :function(err){
					mui.toast("服务繁忙...");
					return;
				}
			});
		});
		
		
		function fun_loadCommLst(){
			mui.ajax({
				url : $request_url.getGoodBooksCommList,
				type : "get",
				dataType : "json",
				headers: {
				"Authorization": $headers_authorization
				},
				data : {
					objectType : "article",
					destObjectId : $booksid,
					rows : 10,
					page : 0
				},
				success : function(dat){
					if(dat.code == 0){
						var $artCommLst = document.getElementById("goodBooksBody");
						var $commArr = dat.result;
						if($commArr != null && $commArr != ""){
							for(var i = 0; i < $commArr.length; i ++){
								var $commDoc = document.createElement("div");
								$commDoc.innerHTML = fun_commentLstHtml($commArr[i], i);
								$artCommLst.appendChild($commDoc);
							}
						}
					} else {
						mui.toast(dat.message);
					}
					
				}, error : function(err){
					mui.toast("无评论数据...");
				}
			});
		}
	</script>

</html>